<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="<%=basePath %>css/list.css">
        <link rel="stylesheet" href="<%=basePath %>css/xcConfirm.css">
		<link href="<%=basePath %>css/H-ui.min.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="<%=basePath %>lib/icheck/icheck.css">
		<script src="<%=basePath %>js/jquery.min-1.11.js"></script>
		<script src="<%=basePath %>js/echarts.js"></script>

       
    </head>
    <body>
		<div class="connect_wrap">
			<h3 style= "text-align: center;">商品销售量统计</h3>
			<div class="row cl" style="max-width:88%;margin-left:8%;">
			<div class="labelText"></div>
			<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    		<div id="main" style="width: 900px;height:600px;margin:0 auto"></div>
			</div>
		</div>
		
		<script type="text/javascript">
		
		$(function(){
		 	var echare ='${echare}';
			var w = JSON.parse(echare); 
		
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		
        // 指定图表的配置项和数据
        option = {
	    title: {
	        text: '折线图堆叠'
	    },
	    tooltip: {
	        trigger: 'axis'
	    },
	    legend: {
	    	data:['课程','章节','年卡']
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    toolbox: {
	        feature: {
	            saveAsImage: {}
	        }
	    },
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: w.goodsTimes
	    },
	    yAxis: {
	        type: 'value',
	        minInterval : 1
	    },
	    series: [
	        {
	            name:'课程',
	            type:'line',
	            stack: '总量',
	            data:w.courseGoods
	        },
	        {
	            name:'章节',
	            type:'line',
	            stack: '总量',
	            data:w.chapterGoods
	        },
	        {
	            name:'年卡',
	            type:'line',
	            stack: '总量',
	            data:w.vipcardGoods
	        }
	    ]
	};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
   });
    </script>
    </body>
</html>